<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
    v-html指令  渲染标签类型的数据  innerHTML
    v-text     渲染文本类型的数据   innerText
   -->
    <div id="app">
        <div v-html="msg">
        </div>
        <div v-text="msg">
        </div>
        <div v-text="'msg'">
        </div>
        <!-- 视图层 -->
        <h1 id="box">{{con}}</h1>
        <input v-model="con" type="text" id="txt">
        <!-- v-model 收集到布尔值 -->
        <input type="checkbox" v-model="flag">
        <h1 v-if="flag">显示隐藏</h1>
        <!-- select v-model 收集value  -->
        <select v-model="sel">
            <option value="黑">黑龙江</option>
            <option value="冀">河北</option>
            <option value="粤">广东</option>
        </select>
        <h1>{{sel}}</h1>
    </div>
    <script src="vue.js">
    </script>
    <script>
        // v-model指令 是vue提供数据双向绑定指令
        // MVC  
        // model 数据模型层
        // view 视图层
        // Controller 控制器层
        // var myname = "李思"; // model 数据模型层

        // 控制层
        // var txt = document.getElementById("txt");
        // var box = document.getElementById("box")
        // txt.onkeydown = function() {
        //     console.log(111)
        //     box.innerHTML = myname;
        // }
        // MVVM即Model-View-ViewModel
        // M  Model 数据模型层
        // V  View  视图层
        // VM  ViewModel 视图数据模型层

        // v-model 主要绑定在表单元素上  input  select  textarea 
        new Vue({
            el: "#app",
            data() {
                return {
                    msg: "<h1>今天周二，马上放假了</h1>",
                    con: "你好",
                    flag: true, //checkbox的显示控制
                    sel: "", //省份选择
                }
            },
            methods: { //事件函数和普通函数

            },
        })
    </script>
</body>

</html>